<template>
    <div class="my-courses-wrapper">
      <div class="my-courses-list">
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">如何激励你的员工</div>
            <div class="intro">推动企业利润快速增长</div>
            <div class="study-num">15561人学习</div>
            <div class="price">¥ 5000.00</div>
          </div>
        </div>
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">企业家管理团队的必修课</div>
            <div class="intro">五大能力，10天引爆团队</div>
            <div class="study-num">2161人学习</div>
            <div class="price">¥ 5000.00</div>
          </div>
        </div>
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">企业成本居高不下，怎么办？</div>
            <div class="intro">一堂真正降低企业成本的实战课！</div>
            <div class="study-num">9561人学习</div>
            <div class="price">¥ 3090.00</div>
          </div>
        </div>
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">如何激励你的员工</div>
            <div class="intro">推动企业利润快速增长</div>
            <div class="study-num">15561人学习</div>
            <div class="price">¥ 5000.00</div>
          </div>
        </div>
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">如何激励你的员工</div>
            <div class="intro">推动企业利润快速增长</div>
            <div class="study-num">15561人学习</div>
            <div class="price">¥ 2160.00</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "myCourses"
  };
</script>

<style scoped lang="less">
  .courses-item {
    background-color:@bg_color;
    padding:13rpx 21rpx 10rpx 13rpx;
    margin-bottom:10rpx;
  }
  .courses-img {
    width:300rpx;
    height:170rpx;
    & > img {
      width:300rpx;
      height:170rpx;
      border-radius:5rpx;
    }
  }
  .courses-intro {
    width:181rpx;
    padding-left:10rpx;
    flex:1;
  }
  .title {
    color:#333;
    font-weight:bold;
    font-size:@font_size_32;
    .overflow-hidden ()

  }
  .intro, .study-num {
    font-size:@font_size_28;
    color:#B3B4B5;
    .overflow-hidden ()
  }
  .price {
    color:#FF5050;
    font-size:@font_size_32;
    font-weight:bold;
    padding-top:10rpx;
    .overflow-hidden ()
  }
  .overflow-hidden () {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
</style>
